<script setup>
import colorfulFont from "@/components/colorfulFont.vue"
import showBox from "@/components/showBox.vue"
import { code_msg, code_msg1, code_msg2, code_msg3 } from "./code_msg"
import { tabelDataType, tableDataEvent } from "./tabelData"
import myTable from "@/components/myTable.vue"
</script>
<template>
	<div class="colorful-font-show">
		<p class="title">彩色字体</p>
		<p class="tip">当你想要设置渐变色的字体便可一使用此组件</p>

		<showBox :code_msg="code_msg">
			<template #show-body>
				<div class="source-code">这里是源代码</div>
			</template>
		</showBox>

		<div class="title2">基础用法</div>
		<showBox
			:code_msg="code_msg1"
			tip_msg="不传入任何参数就可以直接使用有默认的属性，方便又好用">
			<template #show-body>
				<div class="display-area">
					<colorfulFont msg="基础用法" />
				</div>
			</template>
		</showBox>

		<div class="title2">自定义颜色和是否变化</div>
		<showBox
			:code_msg="code_msg2"
			tip_msg="可以根据自己的喜好定制，可以修改颜色和选择颜色是否变化">
			<template #show-body>
				<div class="display-area" style="justify-content: space-evenly">
					<colorfulFont
						msg="改变渐变颜色"
						background-image="linear-gradient(45deg,#5EC2AF,#48A9A5,#3B9097,#357785,#335F70,#2F4858)" />
					<colorfulFont
						msg="去掉动画"
						background-image="linear-gradient(45deg,#5EC2AF,#48A9A5,#3B9097,#357785,#335F70,#2F4858)"
						animation="false" />
				</div>
			</template>
		</showBox>

		<div class="title2">自定义动画速度</div>
		<showBox
			:code_msg="code_msg3"
			tip_msg="可以根据自己的喜好定制，可以修改颜色和选择颜色是否变化">
			<template #show-body>
				<div class="display-area">
					<colorfulFont msg="改变动画时间" animationDuration="0.5s" />
				</div>
			</template>
		</showBox>

		<div class="title2">属性</div>
		<myTable :tableData="tabelDataType" />

		<div class="title2">事件</div>
		<myTable :tableData="tableDataEvent" :flag="false" />
	</div>
</template>
<style scoped lang="scss">
.colorful-font-show {
	width: 96%;
	height: inherit;
	overflow: auto;
	padding-bottom: 50px;
	.source-code {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40px;
		padding: 20px;
	}
	.title {
		font-size: 50px;
		height: 70px;
		padding: 10px 0;
	}
	.tip {
		margin: 30px 0;
		font-size: 30px;
	}
	.title2 {
		font-size: 40px;
		height: 60px;
		margin: 25px 0;
		display: flex;
		cursor: pointer;
		&::after {
			content: "#";
			display: none;
			height: inherit;
			color: $all-btn-active-bg;
		}
		&:hover::after {
			display: block;
		}
	}
	.display-area {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-weight: bolder;
		font-size: 40px;
	}
}

.row-tabel-class {
	font-size: 30px !important;
}
</style>
